<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/view/common/includes.jsp" %>
<%@ include file="/WEB-INF/view/inc.jsp" %>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>



<body>

<div class="dialog_form">
    <form id="fm" method="post" action="<%=contextPath%>/article/saveAndUpdate">
        <input type="hidden" name="id" value="${article.id}"/>

        <div class="dialog_item">
            <label>文章标题:</label>
            <input  name="title" class="no-space easyui-textbox"  required="true" style="width: 400px"
                   validType="length[1,20]" value="${article.title}"><span>*</span>
        </div>
        <div class="dialog_item">
            <label>内容简介:</label>
            <input name="abstractn" class="easyui-textbox" validType="length[1,1000]" data-options="multiline:true"
                   style="height: 60px ; width: 400px" value="${article.abstractn}">
        </div>

        <div class="dialog_item">
            <label>详情内容:</label>
            <input name="details" class="easyui-textbox" validType="length[1,1000]" data-options="multiline:true"
                   style="height: 60px ; width: 400px" value="${article.details}">
        </div>
        <div class="dialog_item">
        <label>图片:</label>
        <input  name="fileToUpload" id="fileToUpload" type="file" multiple="true" <%--class="easyui-filebox"--%>
                validType="length[1,1000]" style="width: 200px;" value="${article.img}">
            <input type="button" value="上传图片" onclick="uploadImg()">
        </div>
        <div class="dialog_item">
            <label id="title">图片预览:</label>
            <div style="width: 800px;"id="tpyl">
                <c:if test="${not empty StringArr }">
                    <c:forEach items="${StringArr}" var="img">

                        <div class="img_Div" id="${fn:substring(img,1,32)}" style="float: left;margin-left: 3px;margin-bottom: 3px;">
                            <div class="img_del"  onclick="delId('${fn:substring(img,1,32)}')"  >
                                <img class="close" src="/jslib/common/images/button/close.png"  style="width: 10px;float: right;" >
                            </div>
                             <img class="img-square" src="/img/${img}" style="width: 100px;">
                            <input name="img" type="hidden" value="${img}">
                        </div>

                    </c:forEach>
                </c:if>
            </div>
        </div>


</form>
</div>
<script>
    var delId = function(id){
        $("#"+id).remove();
    }
    var uploadImg = function() {
        debugger;
        $.ajaxFileUpload({
            url: "/article/uploadImg",
            fileElementId: "fileToUpload",
            type: "post",
            dataType:"text",
            success: function (result) {
                debugger
                if (result == "0") {
                    $.messager.alert("错误", "请选择上传的图片");
                } else if (result == "1") {
                    $.messager.alert("错误", "有单个文件超过5M");
                } else {

                    var imgArray = result.split(",");
                    $.each(imgArray, function (i, item) {
                                debugger
                                var id = item.substring(0, 32);
                                var div = $("<div class='img_Div_hidden' id=" + id + "  style='float: left;margin-left: 3px;margin-bottom: 3px; '/>");
                                var del_but = $("<div class='img_del' onclick='delId(\"" + id + "\")' />");
                                var img_but = $("<img src='/jslib/common/images/button/close.png'  style='width: 10px;float: right;'>");
                                var img_add = $(" <img class='img-square' src='/img/" + item + " 'style='width: 100px ; height:80px" +
                                "'>");
                                var input = $("<input name='img' type='hidden' value=" + item + ">");
                                del_but.append(img_but);
                                div.append(del_but);
                                div.append(img_add);
                                div.append(input);
                                $("#tpyl").append(div);
                            }
                    )
                }
            }
        })
    }
    var delImg = function(id){
        $("#"+id).remove();
    }
</script>

</body>



</html>
